<template>
  <div class="common-layout">
    <el-container>
      <!-- 左侧菜单栏 -->
      <el-scrollbar height="100vh">
        <el-aside width="201px">
          <el-col>
            <el-menu
              active-text-color="#ffd04b"
              background-color="#304156"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
              router
            >
              <!-- 首页 -->
              <router-link to="/index/dashboard">
                <el-menu-item index="2">
                  <el-icon><icon-menu /></el-icon>
                  <span>首页</span>
                </el-menu-item>
              </router-link>
              <el-sub-menu
                :index="item.id"
                v-for="item in lists"
                :key="item.id"
              >
                <template #title>
                  <el-icon><icon-menu /></el-icon>
                  <span>{{ item.title }}</span>
                </template>
                <el-menu-item
                  :index="items.path"
                  v-for="items in item.child"
                  :key="items.path"
                >
                  <!-- 二级菜单 -->
                  <template #title>
                    <span>{{ items.title }}</span>
                  </template>
                </el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-aside>
      </el-scrollbar>

      <!-- 右侧 -->
      <el-container>
        <!-- 右侧头部 -->
        <el-header style="background-color: #ffa501">Header</el-header>
        <!-- 右侧下部 -->
        <el-main style="background-color: #9acd32"><router-view /></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { ref, reactive } from "vue";

// 左侧菜单栏
const lists = reactive([
  {
    id: 1,
    icon: "Setting",
    title: "运营管理",
    child: [
      {
        title: "订单管理",
        path: "/index/order",
      },
      {
        title: "评论管理",
        path: "/index/comments",
      },
      {
        title: "运费管理",
        path: "/index/freight",
      },
    ],
  },
  {
    id: 2,
    icon: "Setting",
    title: "商品管理",
    child: [
      {
        title: "商品列表",
        path: "/index/product",
      },
      {
        title: "团购商品",
        path: "/index/group",
      },
      {
        title: "类目管理",
        path: "/index/category",
      },
    ],
  },
  {
    id: 3,
    icon: "Setting",
    title: "推广管理",
    child: [
      {
        title: "广告管理",
        path: "/index/advertising",
      },
      {
        title: "优惠卷管理",
        path: "/index/coupon",
      },
    ],
  },
  {
    id: 4,
    icon: "Setting",
    title: "用户管理",
    child: [
      {
        title: "会员管理",
        path: "/index/member",
      },
      {
        title: "地址管理",
        path: "/index/address",
      },
    ],
  },
  {
    id: 5,
    icon: "Setting",
    title: "系统管理",
    child: [
      {
        title: "系统配置",
        path: "/index/system",
      },
      {
        title: "管理员",
        path: "/index/administrator",
      },
      {
        title: "操作日志",
        path: "/index/operate",
      },
      {
        title: "角色管理",
        path: "/index/role",
      },
    ],
  },
]);

// 点击下拉框弹出
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
// 点击收回下拉框
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang="less" scoped>
// 滚动条
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.common-layout {
  height: 100%;
  width: 100%;
  // position: absolute;
  .el-container {
    // 左侧菜单
     .el-aside {
      background-color: #304156;
      .el-menuel-menu {
        width: 200px;
        height: 100vh;
      }
      .el-scrollbar {
        width: 200px;

        height: 100vh;
      }
      .el-menu{
        height: 100vh;
      }
    }
    .el-container {
      //  头部导航
      .el-header {
        background-color: orange;
      }

      // 主体内容
      .el-main {
        background-color: #9acd32;
      }
    }
  }
}
</style>